<template>
  <div class="table-list">
    <dataList
      :pageInfo="pager"
      :listData="tableData"
      :selectData="selectDataArr"
      searchName="communityName"
      :menuList="['export']"
      :filterList="filterList"
      @menu-click="handleMenuClick"
    >
      <template slot="search">
        <el-input placeholder="请输入社区名称" v-model="searchValue" @change="searchByKeywords" maxlength="10" clearable @clear="handleClear">
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
      </template>
      <el-table :data="tableData" align="center" @selection-change="$event => (selectDataArr = $event)">
        <el-table-column label="街道" prop="streetName"></el-table-column>
        <el-table-column label="社区" prop="communityName"></el-table-column>
        <el-table-column :label="gapType=='2' ? '常住人口':'管理人口'" prop="population"></el-table-column>
        <el-table-column label="物业类型" prop="propertyType">
					<template slot-scope="scope">{{getCardTypeValue(scope.row.propertyType,propertyTypes)}}</template>
				</el-table-column>
        <el-table-column label="现状（已投入使用）" prop="facilitiesNum"></el-table-column>
        <el-table-column label="现状（配建未移交）" prop="constructionProjectNum"></el-table-column>
        <el-table-column label="需求" prop="reqNum"></el-table-column>
        <el-table-column :label="gapLabel" prop="gapNum"></el-table-column>
      </el-table>
    </dataList>
  </div>
</template>

<script>
import dataList from '@/components/dataList'
import { mapGetters } from "vuex";
import { fetchList } from "@/views/property-plan-sys/planning-equipment-management/gap-data/api/gapdata.js";
export default {
  name: 'gap-table',
  props: {
    gapType: {
      type: String,
      default: "1"
    }
  },
  provide () {
    return {
      initList: this.filter,
    };
  },
  components: { dataList },
  computed: {
    ...mapGetters(['permissions']),
    gapLabel () {
      if ("1" === this.gapType) {
        return "缺口（建筑面积/用地面积）"
      }
      if ("2" === this.gapType) {
        return "缺口（班）"
      }
      if ("3" === this.gapType) {
        return "缺口（箱）"
      }
      if ("4" === this.gapType) {
        return "缺口（座）"
      }
    },
    filterList () {
      const types = this.getDict('specific_types')
      const [startNum, endNum] = {
        '1': [0, 10],
        '2': [10, 13],
        '3': [13, 14],
        '4': [14, 15],
      }[this.gapType]
      return [
        { label: '物业类型', inputType: 'select', name: 'propertyTypes', multiple: true, children: types.slice(startNum, endNum) },
        { label: '街道', inputType: 'dict', dictName: 'streets', name: 'streetNames', multiple: true },
        { label: '社区', inputType: 'dict', dictName: 'community_names', name: 'communityNames', multiple: true }
      ]
    },
  },
  mounted () {
    this.getListData();
    this.communityName = this.getDict('community_names')
    this.propertyTypes = this.getDict('specific_types')
  },
  data () {
    return {
      tableData: [],
      placeholder: "搜索社区名称",
      communityName: [],
      searchValue: '',
      // 请求参数
      params: {
        communityNames: '',
        streetNames: '',
        propertyTypes: '',
      },
      // 选中的数据
      selectDataArr: [],
      // 分页
      pager: {
        total: 0, // 总页数
        current: 1, // 当前页数
        size: 20 // 每页显示多少条
      },
      // 页面loading
      loading: false,
			propertyTypes: [],
    }
  },
  methods: {
    filter (data) {
      if (data.current) {
        delete data.current
      }
      console.log(data)
      this.getListData(data)
    },
    getListData (params = {}) {
      this.loading = true
      let requestData = { gapType: this.gapType, ...this.params, ...params }
      fetchList(requestData).then(res => {
        const { current, size, total, records } = res.data.data
        this.tableData = records
        this.params = requestData
        this.pager = { total, current, size }
      }).finally(() => {
        this.loading = false
      })
    },
    // 分页搜索
    searchByKeywords (val) {
      this.params.communityNames = ""
      if (val) {
        if (!this.params.communityNames) {
          this.params.communityNames = []
        }
        let cnames = []
        this.communityName.map(cn => {
          if (cn.label.indexOf(val) != -1) {
            cnames.push(cn.value)
          }
        })
        if (cnames.length > 0) {
          this.params.communityNames.push(...cnames)
        } else {
          this.params.communityNames.push(val)
        }
        this.getListData({ current: 1 })
      } else {
        this.handleClear()
      }
    },
    // 搜索清空
    handleClear () {
      this.params.communityNames = []
      this.getListData({ current: 1 })
    },
    exportData () {
      this.publicExport('缺口数据', '/api/gapdata/download', { ...this.params, gapType: this.gapType })
    },
    searchReset () {
      this.searchDataFrom = {}
      this.searchFrom = {}
      this.getListData()
    },
		getCardTypeValue(num, sum){
			let arr = sum.filter(e=>e.value === num)
			if (arr.length > 0) {
				return arr[0].label
			} else {
				return num
			}
		},
    // 菜单点击监听
    handleMenuClick (type) {
      switch (type) {
        case 'export':
          this.exportData();
          break;
        default:
          this.$message(type)
          break;
      }
    }
  }

}
</script>

<style scoped lang="scss">
@include formWrap(4);
.margin-box2 {
  margin: 0px 0px;
}
.table-list {
  min-height: 500px;
}
</style>
